<template>
  <view class="contact-page">
    <view class="searchbox">
      <view class="search-input" @click="search">
        <tui-icon name="search" :size="18" unit="px" color="#999" />
        <text class="search-text">搜索</text>
      </view>
    </view>
    <view
      class="list-cell cell-last"
      hover-class="cell-hover"
      :hover-start-time="150"
    >
      <image src="/static/icon/new-friend.png" class="img"></image>
      <view class="title">新的朋友</view>
    </view>
    <!-- list -->
    <block v-for="(list, index) in lists" :key="index">
      <tui-sticky
        :recalc="1"
        :scrollTop="scrollTop"
        stickyHeight="66rpx"
        :index="index"
        @change="stickyChange"
      >
        <!-- tips:sticky组件中最好不要嵌套其他自定义组件 -->
        <template v-slot:header>
          <view class="list-cell-divider">{{
            list.letter == "well" ? "#" : list.letter
          }}</view>
        </template>
        <template v-slot:content>
          <view
            class="list-cell"
            :class="{ 'cell-last': last(list.data, index2) }"
            v-for="(item, index2) in list.data"
            @click="detail(item)"
            :key="index2"
          >
            <image src="/static/avatar.png" class="img"></image>
            <view class="title">{{ item.name }}</view>
          </view>
        </template>
      </tui-sticky>
    </block>
    <!-- count -->
    <view class="footer" v-if="lists.length">120位联系人</view>
    <view class="indexed-list-bar" :style="{ height: indexBarHeight + 'px' }">
      <view
        @touchstart.stop="touchStart"
        @touchmove.stop.prevent="touchMove"
        @touchend.stop="touchEnd"
        @touchcancel.stop="touchCancel"
        @click="handleClick(index3)"
        v-for="(items, index3) in lists"
        :key="index3"
        class="indexed-list-text"
        :style="{ height: indexBarItemHeight + 'px' }"
      >
        {{ items.letter == "well" ? "#" : items.letter }}
      </view>
    </view>
    <view
      class="indexed-list-alert"
      v-if="touchmove && lists[touchmoveIndex].letter"
    >
      <text>{{
        lists[touchmoveIndex].letter == "well"
          ? "#"
          : lists[touchmoveIndex].letter
      }}</text>
    </view>
  </view>
</template>

<script>
import { data } from "./data.js";
export default {
  computed: {
    last() {
      return function (data, index) {
        return data.length - 1 == index ? true : false;
      };
    },
  },
  data() {
    return {
      lists: [],
      touchmove: false, // 是否在索引表上滑动
      touchmoveIndex: -1,
      titleHeight: 0, // A字距离窗口顶部的高度
      indexBarHeight: 0, // 索引表高度
      indexBarItemHeight: 0, // 索引表子项的高度
      winHeight: 0,
      scrollTop: 0,
    };
  },
  onLoad(options) {
    setTimeout(() => {
      uni.getSystemInfo({
        success: (res) => {
          let winHeight = res.windowHeight;
          let barHeight = winHeight - uni.upx2px(232);
          this.winHeight = winHeight;
          this.indexBarHeight = barHeight;
          this.indexBarItemHeight = barHeight / 25;
          this.titleHeight = uni.upx2px(132);
          this.lists = data;
        },
      });
    }, 10);
  },
  watch: {
    touchmoveIndex() {
      if (this.touchmoveIndex != -1) {
        uni.pageScrollTo({
          scrollTop: this.lists[this.touchmoveIndex].stickyTop + 1,
          duration: 10,
        });
      }
    },
  },
  methods: {
    touchStart(e) {
      this.touchmove = true;
      let pageY = e.changedTouches[0].pageY - this.scrollTop;
      let index = Math.floor(
        (pageY - this.titleHeight) / this.indexBarItemHeight
      );
      let item = this.lists[index];
      if (item) {
        this.touchmoveIndex = index;
      }
    },
    touchMove(e) {
      let pageY = e.changedTouches[0].pageY - this.scrollTop;
      let index = Math.floor(
        (pageY - this.titleHeight) / this.indexBarItemHeight
      );
      let item = this.lists[index];
      if (item) {
        this.touchmoveIndex = index;
      }
    },
    touchEnd() {
      this.touchmove = false;
      this.touchmoveIndex = -1;
    },
    touchCancel() {
      this.touchmove = false;
      this.touchmoveIndex = -1;
    },
    handleClick(index) {
      if (index === undefined || this.touchmove) return;
      let item = this.lists[index];
      if (item) {
        this.touchmoveIndex = index;
      }
    },
    stickyChange(e) {
      let index = e.index;
      this.lists[index].stickyTop = e.top;
    },
    search() {
      uni.navigateTo({
        url: "/pages/search/search",
      });
    },
    detail(v) {
      uni.navigateTo({
        url: `/pages/message/chat/chat?title=${v.name}&type=2`,
      });
    },
  },
  //页面滚动执行方式
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style lang="scss" scoped>
@import "./contact.scss";
</style>
